<template>
  <div class="strut-div">
    <div id="gov-columnar" class="strut-div"></div>
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: "GovColumnarChart",
    props: ['config'],
    data() {
      return {
        chart: null,
      }
    },
    methods: {
      initChart() {
        let option = {
          color: [this.config.x.color],
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: '', // 默认为直线，可选为：'line' | 'shadow' | ''空值没背影
            },
            //backgroundColor: '#333',  //鼠标移动到图上面时，显示的背景颜色
            formatter: function (params, ticket, callback) {
              return params[0].axisValue + "数" + "<br />" +
                "指标值：" + params[0].data;
            },
            padding: 4
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: [],
              axisTick: {
                show: true,
                alignWithLabel: true,
                interval: 0,
              },
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#ccc',//左边线的颜色
                  width: '1'//坐标线的宽度
                }
              },
              axisLabel: {
                interval: 0    //设置0 强制显示全部x轴全部标签
              },
              nameTextStyle: {
                fontSize: 8,
              }
            }
          ],
          yAxis: [
            {
              splitLine: {
                show: true, //显示网格线
                lineStyle: {
                  color: '#222' //网格线颜色设置
                }
              },
              type: 'value',
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#ccc',//左边线的颜色
                  width: '1'//坐标线的宽度
                }
              }
            }
          ],
          series: [
            {
              name: '',
              type: 'bar',
              barWidth: '22%',
              data: [],
              // 柱状渐变色
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [
                      {offset: 0, color: '#FFC83D'},
                      {offset: 1, color: '#EF6421'}
                    ]
                  )
                }
              },
              emphasis: {
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {offset: 0, color: '#EF6421'},
                    {offset: 1, color: '#FFC83D'}
                  ]
                )
              }
            }
          ],
          textStyle: {
            color: '#E9F4FF'
          }
        };
        setTimeout(() => {
          option.xAxis[0].data = ['发文文件', '收文文件', '会议通知', '上报信息', '信息利用', '通知公告', '接收邮件'],
            option.series[0].data = [450, 350, 330, 250, 220, 52, 10],
            this.chart.setOption(option);
        }, 300);

      },
      refreshChart() {

      }
      ,
    },
    mounted() {
      this.chart = echarts.init(document.getElementById('gov-columnar'));
    }

  }
</script>

<style scoped lang="scss" type="text/scss">

</style>
